<style>
    .td-active{
        background-color:LightSkyBlue;
    }
    .td-active:hover{
        background-color:#00A1CB!important;
    }
    .input1{
        line-height:1;
        display:inline!important;
        width:auto!important;
    }
</style>
<div class="container" style="margin:0 0 0 0;padding:0 0 0 0">
    <div class="row page-header-new" style="margin:0 0 0 0">
        <div class="page-title">
            <h4 >业绩分析</h4>
        </div>
    </div>
    <div class="body">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <div class="btn-group">
                    <button class="btn btn-default" style="line-height: 1;width:{{width7}}px;background-color:	#8470FF">统计类型</button>
                    <button class="{{performanceMode==1?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changePerformanceMode(1)">年度业绩变化</button>
                    <button class="{{performanceMode==2?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changePerformanceMode(2)">季度业绩变化</button>
                    <button class="{{performanceMode==3?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changePerformanceMode(3)">年度业绩成分分析</button>
                    <button class="{{performanceMode==4?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changePerformanceMode(4)">季度业绩成分分析</button>
                    <button class="{{performanceMode==5?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changePerformanceMode(5)">某财季业绩预测</button>
                </div>
                <div class="btn-group" ng-show="performanceMode==3||performanceMode==4">
                    <button class="btn btn-default" style="line-height: 1;width:{{width7}}px;background-color:	#8470FF">统计限制条件</button>
                    <button class="{{limitMode==1?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeLimitMode(1)">地域</button>
                    <button class="{{limitMode==2?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeLimitMode(2)">地点</button>
                    <button class="{{limitMode==3?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeLimitMode(3)">产品线</button>
                    <button class="{{limitMode==4?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeLimitMode(4)">标签</button>
                    <button class="{{limitMode==5?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeLimitMode(5)">合作伙伴</button>
                </div>

                <!--<div class="btn-group" ng-show="performanceMode==3||performanceMode==4">-->
                    <!--<button class="btn btn-default" style="line-height: 1;width:{{width7}}px;background-color:	#8470FF">统计限制条件</button>-->
                    <!--<button class="{{area?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeLimitation(1)">地域</button>-->
                    <!--<button class="{{address?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeLimitation(2)">地点</button>-->
                    <!--<button class="{{product?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeLimitation(3)">产品线</button>-->
                    <!--<button class="{{tag?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeLimitation(4)">标签</button>-->
                    <!--<button class="{{partner?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeLimitation(5)">合作伙伴</button>-->
                <!--</div>-->
                <br/><br/>
                <div class="btn-group">
                    <button class="btn btn-default" style="line-height: 1;width:{{width7}}px;background-color:	#8470FF">统计方式</button>
                    <button class="{{displayMode==1?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeDisplayMode(1)">个人</button>
                    <button class="{{displayMode==2?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeDisplayMode(2)">团队</button>
                    <button ng-show="performanceMode==1||performanceMode==2" class="{{displayMode==3?'btn btn-info':'btn btn-default'}}" style="line-height: 1;width: {{width7}}px" ng-click="changeDisplayMode(3)">对比</button>
                </div>
                <br/><br/>
                <div class="row">
                    <div class="pull-left">
                        <div ng-show="performanceMode==1">
                            <label>查看年份&nbsp;&nbsp;<select class="form-control input1" ng-model="year1" ng-options="item for item in yearList"></select>年 ->
                                <select class="form-control input1" ng-model="year2" ng-options="item for item in yearList"></select>年</label>
                        </div>
                        <div ng-show="performanceMode==2">
                            <label>查看季度&nbsp;&nbsp;<select class="form-control input1" ng-model="year3" ng-options="item for item in yearList"></select>年
                                <select class="form-control input1" ng-model="season3" ng-options="item.value as item.name for item in seasonList"></select>季 ->
                                <select class="form-control input1" ng-model="year4" ng-options="item for item in yearList"></select>年
                                <select class="form-control input1" ng-model="season4" ng-options="item.value as item.name for item in seasonList"></select>季
                            </label>
                        </div>
                        <div ng-show="performanceMode==3">
                            <label>查看年份&nbsp;&nbsp;<select class="form-control input1" ng-model="year5" ng-options="item for item in yearList"></select>年</label>
                        </div>
                        <div ng-show="performanceMode==4">
                            <label>查看季度&nbsp;&nbsp;<select class="form-control input1" ng-model="year6" ng-options="item for item in yearList"></select>年
                                <select class="form-control input1" ng-model="season6" ng-options="item.value as item.name for item in seasonList"></select>季</label>
                        </div>
                    </div>
                    <div class="pull-right">
                        <div class="center">
                            <button class="btn btn-info" style="line-height:1" ng-click="initGoogleChart()">查看</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br/><br/>
        <div class="row" style="padding-left:20px">
            <div class="col-md-3">
                <div>
                    <button class="btn btn-default" style="line-height:1;width:100%;background-color:#8470FF">统计范围</button>
                </div>
                <div ng-show="displayMode==1">
                    <table class="datatable table table-hover dataTable">
                        <tbody>
                            <tr ng-repeat="item in reportLine">
                                <td class="{{selectedItem1.id==item.id?'td-active':''}}" ng-click="choseThisContact(item)">{{item.baseInfo.name}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div ng-show="displayMode==2">
                    <tree-view-hierarchy tree-data="reportLine2" text-field="name" value-field="id" selected="selected" selected-item="selectedItem2"></tree-view-hierarchy>
                </div>
                <div ng-show="displayMode==3">
                    <table class="datatable table table-hover dataTable">
                        <tbody>
                        <tr ng-repeat="item in reportLine">
                            <td class="{{checkIfSelected(item)?'td-active':''}}" ng-click="choseTwoThisContact(item)">{{item.baseInfo.name}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-9">
                <div ng-show="performanceMode==1||performanceMode==2" id="chart_line_1" class="center"></div>
                <div ng-show="performanceMode==3||performanceMode==4" id="chart_pie_1" style="width:600px;height:300px;position:center"></div>
                <div>
                    <table class="datatable table table-hover dataTable" ng-show="performanceMode==1&&displayMode!=3">
                        <thead>
                            <tr>
                                <th style="width:50%">年份</th>
                                <th style="width:50%">销售额:万元</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in data1">
                                <td>{{item.year}}</td>
                                <td>{{item.amount}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="datatable table table-hover dataTable" ng-show="performanceMode==1&&displayMode==3">
                        <thead>
                        <tr>
                            <th style="width:40%">年份</th>
                            <th style="width:30%">{{selectedItem3.baseInfo.name}}销售额:万元</th>
                            <th style="width:30%">{{selectedItem4.baseInfo.name}}销售额:万元</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in data3">
                            <td>{{item.year}}</td>
                            <td>{{item.amount1}}</td>
                            <td>{{item.amount2}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="datatable table table-hover dataTable" ng-show="performanceMode==2&&displayMode!=3">
                        <thead>
                        <tr>
                            <th style="width:50%">季度</th>
                            <th style="width:50%">销售额:万元</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in data2">
                            <td>{{item.season}}</td>
                            <td>{{item.amount}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="datatable table table-hover dataTable" ng-show="performanceMode==2&&displayMode==3">
                        <thead>
                        <tr>
                            <th style="width:40%">季度</th>
                            <th style="width:30%">{{selectedItem3.baseInfo.name}}销售额:万元</th>
                            <th style="width:30%">{{selectedItem4.baseInfo.name}}销售额:万元</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in data4">
                            <td>{{item.season}}</td>
                            <td>{{item.amount1}}</td>
                            <td>{{item.amount2}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="datatable table table-hover dataTable" ng-show="(performanceMode==3||performanceMode==4)&&displayMode!=3">
                        <thead>
                        <tr>
                            <th style="width:50%">维度</th>
                            <th style="width:50%">销售额:万元</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in componentData">
                            <td>{{item.name}}</td>
                            <td>{{item.amount}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>